<template>
    <view class="app">
        <load :ready="ready"></load>
		
		<view class="ibox" v-if="info">
			<view class="goods-list">
				<view class="goods-item" v-for="(item, index) in info.orderProductList
				" :key="item.id">
					<u-image :src="item.picture" border-radius="16" width="128" height="128"></u-image>
					<view class="info">
						<view class="goods-name txt-hide">{{item.goodsName}}</view>
						<view class="attr">
							<text v-for="(attr, idx) in item.specificationValue">{{attr}}</text>
						</view>
						<view class="desc">
							<view class="price">¥<text>{{item.price}}</text></view>
							<view class="num">X{{item.number}}</view>
						</view>
					</view>
				</view>
				
			</view>
		</view>
		
		<u-form :model="form" ref="uForm" label-width="140">
			
		<view class="ibox">
			<u-form-item label="开票类型" >
				<view class="form-item-info">
					电子发票
				</view>
			</u-form-item>
			<u-form-item label="发票类型" :border-bottom="false">
				<view class="form-item-info">
					<u-radio-group v-model="billType" width="50%" size="28" @change="radioGroupChange">
						<u-radio 
							@change="radioChange" 
							v-for="(item, index) in typeList" :key="index" 
							:name="item.name"
							:disabled="item.disabled"
						>
							<text style="font-size: 13px;">
								{{item.label}}
							</text>
						</u-radio>
					</u-radio-group>
				</view>
			</u-form-item>
		</view>
		
		<view class="switch-wrap">
			<view class="int" v-if="billingInfo.id" @click="link(`./bill_list?id=${billingInfo.id}&type=${billingInfo.billingType}`)">
				<view class="label">开票信息：</view>
				<view class="txt-hide">{{billingInfo.name}}</view>
				<image src="/static/icon_arrow.png" mode="widthFix" class="icon"></image>
			</view>
			<view class="int" v-else >
				<view class="label">开票信息：</view>
				<view class="txt-hide">暂无发票</view>
			</view>
			<button class="u-reset-button btn-add" @click="link(`./bill_form`)">新增发票</button>
		</view>
		
		<!-- 个人 -->
		<view class="ibox" v-if="billType == 1">
			<u-form-item label="姓名：">
				<view class="form-item-info">
					{{billingInfo.name}}
				</view>
			</u-form-item>
			<u-form-item label="邮箱：" :border-bottom="false">
				<view class="form-item-info">
					{{billingInfo.email}}
				</view>
			</u-form-item>
		</view>
		
		<!-- 公司 -->
		<view class="ibox"  v-if="billType == 2">
			<u-form-item label="发票抬头：" label-width="160">
				<view class="form-item-info">
					{{billingInfo.name}}
				</view>
			</u-form-item>
			<u-form-item label="纳税人识别号：" label-width="300">
				<view class="form-item-info">
					{{billingInfo.taxpayerNumber}}
				</view>
			</u-form-item>
			<u-form-item label="单位地址：" label-width="160">
				<view class="form-item-info">
					{{billingInfo.address}}
				</view>
			</u-form-item>
			<u-form-item label="单位联系电话：" label-width="240">
				<view class="form-item-info">
					{{billingInfo.mobile}}
				</view>
			</u-form-item>
			<u-form-item label="开户行：" :border-bottom="false" label-width="160">
				<view class="form-item-info">
					{{billingInfo.openingBank}}
				</view>
			</u-form-item>
		</view>
		
		
		
		
		<u-gap height="160"></u-gap>
		<view class="btnbox fixed">
			<u-button type="primary" shape="circle" @click="submit" :loading="isLoading" :custom-style="btnStyle">确认申请</u-button>
		</view>
		</u-form>
		
		
		
		<u-modal v-model="showDelivery" :show-confirm-button="true" :show-cancel-button="true" confirm-text="确认" content="请确认商品已配齐后再进行配送"></u-modal>
	</view>
</template>

<script>
import { mapState, mapActions, mapMutations, mapGetters } from 'vuex';
import { mixinsBase } from '@/common/js/mixins';
import filter from '../../common/js/filter';
let that;
export default {
    mixins: [mixinsBase],
    components: {},
    data() {
        return {
			showDelivery:false,
			form:{},
			btnStyle:this.$config.btnStyle,
			typeList:[{
				label: '普通发票(个人)',
				name:1,
			},{
				label: '普通发票(单位)',
				name:2,
			}],
			billType: 1,
			info:null,
			billingInfo:{},
			billingList1:[],
			billingList2:[],
        };
    },
   onLoad(o) {
       that = this;
	   uni.$on('selectBill', this.selectBill);
	    uni.$on('addBill', this.addBill);
   		if(o.id){
   			this.id = o.id
   			this.getInit();
			this.getList();
   		}
   },
    onReady() {
    },
    onUnload() {
        that = null;
		uni.$off('selectBill', this.selectBill);
		 uni.$off('addBill', this.addBill);
    },
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function() {
        // this.getInit(data=>{
        //      uni.stopPullDownRefresh();
        //      common.showTip('刷新成功');
        // });
    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function() {},

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function() {
        //       return {
        // 	// path,
        // 	imageUrl:config.shareImg,
        // 	// title
        // }
    },
    methods: {
		async getList(){
			let res = await this.$api.billingList({
				pageNum: 1,
				pageSize: 999,
			});
			if (res.data.code == this.$config.RESOK) {
				let list = res.data.rows || [];
				this.billingList1 = list.filter(item=>item.billingType == 1)
				this.billingList2 = list.filter(item=>item.billingType == 2)
				uni.setStorageSync('billingList1',this.billingList1)
				uni.setStorageSync('billingList2',this.billingList2)
				if(this.billType == 1){
					this.billingInfo = this.billingList1[0]
				} else{
					this.billingInfo = this.billingList2[0]
				}
			} else {
				this.$message.error(res.data.msg);
			}
		},
		async getInit(){
			let res = await this.$api.agencyOrderDetail({
				orderId:this.id
			});
			if (res.data.code == this.$config.RESOK) {
				let info = res.data.data;
				this.info = info;
				this.ready=true;
			} else {
				this.$message.error(res.data.msg);
			}
		},
		selectBill(e){
			this.billingInfo = e;
		},
		addBill(){
			this.getList();
		},
		async submit(){
			console.log('submit')
			if(!this.billingInfo.id){
				this.$common.showTip('请选择发票')
				return
			}
			this.isLoading = true
			let res = await this.$api.agencyOrderSave({
				orderId: this.id,
				// billingTypeId: this.billingInfo.billingType,
				billingTypeId: this.billingInfo.id,
				name:this.billingInfo.name,
				email:this.billingInfo.email,
			});
			this.isLoading = false;
			if (res.data.code == this.$config.RESOK) {
				// this.$common.showTip(res.data.msg);
				this.$common.showTip('申请成功 请耐心等待平台处理');
				
				
				setTimeout(() => {
					uni.navigateBack()
				}, this.$config.timeLoad);
			} else {
				this.$message.error(res.data.msg);
			}
		},
		// 选中某个单选框时，由radio时触发
		radioChange(e) {
			// console.log(e);
		},
		// 选中任一radio时，由radio-group触发
		radioGroupChange(e) {
			if(this.billType == 1){
				this.billingInfo = this.billingList1[0]
			} else{
				this.billingInfo = this.billingList2[0]
			}
		},
		handleTab(e){
			this.tab = e;
		},
		change(e){
			this.current = e;
		},
        ...mapActions([])
    },
    computed: {
        ...mapState({
            userInfo: 'userInfo'
        })
    }
};
</script>

<style scoped lang="scss">
page {
    background-color: #F8FAFD;
}

.ibox{
	background: #fff;
	margin: 16rpx 32rpx;
	border-radius: 12px;
	padding: 0 32rpx;
}
.switch-wrap{
	margin: 16rpx 32rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	.int{
		border: 1px solid #ddd;
		border-radius: 5px;
		width: 72%;
		padding: 0 20rpx;
		display: flex;
		height: 48px;
		align-items: center;
	}
	.txt-hide{
		flex: 1;
		color: $color;
	}
	.icon{
		width: 20px;
		height: 20px;
	}
	.btn-add{
		background: $color;
		color: #fff;
		height: 48px;
		line-height: 48px;
		font-size: 14px;
		margin: 0;
		width: 25%;
	}
}
.form-item-info{
	text-align: right;
	width: 100%;
}
.goods-list{
	border: 0;
}
</style>
